<section id="matter_detali" class="ml-24 mr-24">
  <hl-page-header title="服务推荐"></hl-page-header>
  <!-- //主体列表 -->
  <div class="house-sharing-list clearfix">
    <div class="matter_img contents">
      <button class="s-btn-default btn font-14 upload-file" @click="uploadFile('img')" v-if="quanxian.indexOf('c249') > -1">上传图片</button>
      <div class="list br-4 global_table" style="border:1px solid #E5E5E5;margin: 15px 0 50px 0">
        <ul class="dy-flex l-h-40 text-center global_table_title">
          <li class="dy-fx-2">图片</li>
          <li class="dy-fx-1">真实浏览量</li>
          <li class="dy-fx-2">虚拟浏览量</li>
          <li class="dy-fx-3">链接</li>
          <li class="dy-fx-1">排序</li>
          <li class="dy-fx-2 border-l">操作</li>
        </ul>
        <div>
          <ul class="dy-flex l-h-40 text-center border-t global_table_item" v-for="(item, index) in data">
            <li class="dy-fx-2"><img width="120" height="80" :src="item.imgUrl" alt=""></li>
            <li class="dy-fx-1"><span>{{item.realPageViews}}</span><span style="margin-left:10px" :class="item.showPageView == 'R'?'icon-show':'icon-hide'" @click="editShow(item)"></span></li>
            <li class="dy-fx-2 editurl">
              <span v-if="!item.isLEdit">{{item.virtualPageViews}}</span>
              <input type="text" style="width:50px" @change="editVir(item)" v-model="item.virtualPageViews" v-if="item.isLEdit">
              <span :class="item.showPageView == 'V'?'icon-show':'icon-hide'" @click="editShow(item)"></span>
              <span @click="item.isLEdit = !item.isLEdit" style="margin-left:10px;" class="icon-Gm-edit"></span>
            </li>
            <li class="dy-fx-3 editurl">
              <span v-if="!item.isEdit" :title="item.url">{{item.link}}</span>
              <input type="text" v-model="item.Editlink" v-if="item.isEdit" style="width:150px;">
              <span class="icon-Gm-edit" v-if="!item.isEdit" @click="editUrl(item)" v-show="quanxian.indexOf('c225') > -1"></span>
              <span class="icon-Gm-confirm" v-if="item.isEdit" @click="editService(item)"></span>
              <span class="icon-Gm-delete-2" v-if="item.isEdit" @click="item.isEdit = false"></span>
            </li>
            <li class="dy-fx-1">{{item.seq}}</li>
            <li class="dy-fx-2 border-l operation">
              <span class="icon-ascending" v-if="index != 0" @click="rank(item,'A')" v-show="quanxian.indexOf('c226') > -1"></span>
              <span class="icon-descending" v-if="index != data.length-1" @click="rank(item,'D')" v-show="quanxian.indexOf('c226') > -1"></span>
              <span class="icon-Gm-delete" @click="delItem(item)" v-if="quanxian.indexOf('c250') > -1"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="upload-file-button"></div>
  </div>
</section>

<script src="modules/workbench/scripts/service_recommend.js" charset="utf-8"></script>

<style media="screen">
  .contents {
    padding-top: 20px;
  }

  .videoBox {
    width: 300px;
    margin-bottom: 20px;
    position: relative;
  }

  .videoBox span {
    position: absolute;
  }

  .editurl {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .editurl span:nth-child(1) {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .editurl>span,
  .editurl>input {
    margin: 0 5px
  }

  .editurl>input {
    height: 34px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 4px 0px rgba(214, 214, 214, 0.75);
    border-radius: 4px;
    border: 1px solid rgba(229, 229, 229, 1);
    text-align: center;
  }

  .global_table_item li {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center
  }

  .operation span {
    margin: 0 10px;
    cursor: pointer;
  }

  .delIcon {
    position: relative;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
  }
</style>
